<template>
  <div id="one">
    <!-- <div class="iphonetop">9.23</div> -->
    <div class="title">
      <div class="img-fh" @click="back">
        <img src="../../assets/img/返 回.png" alt="">
      </div>
      <div class="text">随手拍</div>
    </div>
    <div class="xiangm">
      <van-form ref="form">
        <van-cell-group>
          <van-field
            v-model="xmname"
            label="项目名称"
            required
            input-align="right"
            is-link
            placeholder="请选择项目名称"
            :rules="[{ required: true }]"
          />

          <van-field
            v-model="fieldValue"
            required
            input-align="right"
            is-link
            readonly
            :rules="[{ required: true }]"
            label="项目整改"
            placeholder="请选择整改分类"
            @click="show = true"
          />
          <van-popup v-model="show" round position="bottom">
            <van-cascader
              v-model="cascaderValue"
              title="请选择整改类型"
              :options="options"
              @close="show = false"
              @finish="onFinish"
            />
          </van-popup>
          <!-- 位置 -->
          <van-field
            v-model="fieldAreaValue"
            required
            input-align="right"
            is-link
            readonly
            :rules="[{ required: true }]"
            label="位置"
            placeholder="请选择位置"
            @click="isShow = true"
          />
          <van-popup v-model="isShow" round position="bottom">
            <van-cascader
              v-model="areaValue"
              title="请选择整改类型"
              :options="options1"
              @close="isShow = false"
              @finish="onFinish1"
            />
          </van-popup>
          <!-- 整改详情 -->
          <van-field
            v-model="xiangq"
            rows="2"
            autosize
            label="整改详情"
            type="textarea"
            maxlength="50"
            placeholder="请描述整改详情"
            show-word-limit
          />
        </van-cell-group>
        <span>
          <div v-for="(item, index) in hallImg" :key="index" class="item">
            <img :src="item" alt="">
          </div>
          <van-uploader
            v-model="fileList"
            accept="image"
            :after-read="afterRead"
            multiple
            :max-count="1"
          />
        </span>
      </van-form>
      <van-field
        v-model="address"
        rows="2"
        autosize
        label="工地地址"
        type="textarea"
        maxlength="50"
        right-icon="location"
        placeholder="余杭区文一西路1426号金之源大厦"
        show-word-limit
      />
    </div>
    <div class="btn">
      <button @click="back">取消</button>
      <button @click="fabu(), downCreate1()">发布</button>
    </div>
  </div>
</template>

<script>
import {
  Toast,
  Button,
  Cell,
  CellGroup,
  Icon,
  Image as VanImage,
  NavBar,
  Form,
  Field,
  Cascader,
  Popup,
  Picker,
  Checkbox,
  CheckboxGroup,
  Uploader
} from 'vant'

import { postProblemPhotoCreate, FileUpload } from './fetch'

export default {
  name: 'Sspone',
  components: {
    [Button.name]: Button,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [VanImage.name]: VanImage,
    [NavBar.name]: NavBar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Cascader.name]: Cascader,
    [Popup.name]: Popup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [Uploader.name]: Uploader
  },
  data() {
    return {
      fieldAreaValue: '',
      areaValue: '',
      images: '',
      xmname: '',
      leix: '',
      fenl: '',
      xiangq: '',
      tup: '',
      address: '',
      fileList: [],
      hallImg: [],
      show: false,
      isShow: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '安全问题',
          value: '1'
          /* children: [
            { text: "硬件设施", value: "330100" },
            { text: "文明施工", value: "330101" },
            { text: "脚手架", value: "330102" },
            { text: "杭州市", value: "330103" },
          ], */
        },
        {
          text: '质量问题',
          value: '2'
          /* children: [
            {
              text: "房建",
              value: "320104",
              children: [
                { text: "结构验收", value: "330105" },
                { text: "节能验收", value: "330106" },
                { text: "设计验收", value: "330107" },
              ],
            },
            {
              text: "市政",
              value: "320108",
              children: [
                { text: "路基验收", value: "330109" },
                { text: "结构验收", value: "330136" },
                { text: "竣工验收", value: "3301037" },
              ],
            },
          ], */
        }
      ],
      options1: [
        {
          text: '上城区',
          value: '1'
        },
        {
          text: '拱墅区',
          value: '2'
        },
        {
          text: '西湖区',
          value: '3'
        },
        {
          text: '滨江区',
          value: '4'
        },
        {
          text: '萧山区',
          value: '5'
        },
        {
          text: '余杭区',
          value: '6'
        },
        {
          text: '临平区',
          value: '7'
        },
        {
          text: '钱塘区',
          value: '8'
        },
        {
          text: '富阳区',
          value: '9'
        },
        {
          text: '临安区',
          value: '10'
        },
        {
          text: '建德市',
          value: '11'
        },
        {
          text: '桐庐县 ',
          value: '12'
        },
        {
          text: '淳安县',
          value: '13'
        }
      ]
    }
  },

  methods: {
    async afterRead(file) {
      // 上传图片返回图片的地址需要拼接  http://192.168.10.137:9001/
      const res = await FileUpload(file.file)
      this.images = res
      console.log(this.images)
    },
    back() {
      // this.$router.go(-1);
      this.$router.push('/home')
    },
    async fabu() {
      try {
        await this.$refs.form.validate()
        Toast.success('发布成功')
        /*  this.$router.push('/ssp/home') */
      } catch (error) {
        Toast.fail('请输入必填内容')
      }
    },
    onFinish({ selectedOptions }) {
      this.show = false
      this.fieldValue = selectedOptions.map((option) => option.text).join('/')
    },
    onFinish1({ selectedOptions }) {
      this.isShow = false
      this.fieldAreaValue = selectedOptions
        .map((option1) => option1.text)
        .join('/')
    },
    validator(val) {
      return /1\d{10}/.test(val)
    },
    async downloadFile(e) {
      return
    },
    async downCreate1() {
      const res = await postProblemPhotoCreate(
        this.xmname,
        Number(this.cascaderValue),
        this.xiangq,
        this.images,
        Number(this.areaValue),
        this.address
      )
      console.log(res)
    }
  }
}
</script>

<style scoped>
#one {
  font-size: 0.14rem;
}
#one .img1 {
  height: 0.5rem;
}
.img1 img {
  /* 上右下左 */
  clip: rect(10px, 0px, 40px, 0px);
}
.iphonetop,
.title {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.16rem;
  padding: 0.08rem 0;
  background-color: rgba(251, 251, 251);
  display: flex;
}
.title .text {
  width: 3rem;
  font-size: 0.12rem;
  text-align: center;
}
.img-fh img {
  width: 0.15rem;
  height: 0.18rem;
  color: #6c6c6c;
  padding: 0 0.1rem;
}
::v-deep div.van-cell-group {
  background-color: red !important;
}
/* 输入的时候文字颜色 */
::v-deep .van-field__control--right {
  color: gray !important;
}
.btn {
  color: #000;
}
.btn button {
  width: 1.5rem;
  background-color: #d7d7d7;
  padding: 0.16rem;
  margin: 0.9rem 0.18rem;
  border: none;
}
::v-deep .van-uploader {
  /* margin: 10px; */
  top: 10px;
  left: 10px;
}
</style>
